<template>
  <div class="panel">
    <v-chart :option="gaugeOption" :style="chartStyle" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { GaugeChart } from 'echarts/charts'
import { TooltipComponent, GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { use } from 'echarts/core'
import VChart from 'vue-echarts'
import request from "@/util/request.ts";

use([GaugeChart, TooltipComponent, GridComponent, CanvasRenderer])

// 模拟光照强度数据
const lightIntensity = ref(75)

const chartStyle = {
  height: '100%',
  width: '100%',
  marginTop: '5px'
}

// 渐变色配置
const gradient = {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 1,
  y2: 1,
  colorStops: [
    { offset: 0, color: '#84fab0' }, // 起始颜色
    { offset: 1, color: '#8fd3f4' }, // 结束颜色
  ],
}
// 在组件挂载时调用获取光照强度的函数

const getLight = () => {
  request.post("/api/light-monitoring-msg/getLight").then((res) => {
    console.log(res.data)
  if(res.data.code === '200'){
    lightIntensity.value = parseInt(res.data.data)
  }
  })
}
onMounted(() => {
  getLight()
})
// 使用计算属性来确保 chartOption 更新
const gaugeOption = computed(() => ({
  series: [
    {
      type: 'gauge',
      radius: '100%',
      data: [{ value: lightIntensity.value }],
      axisLabel: { 
        formatter: '{value}',
        fontSize: 12,
        distance: 28,
        color: '#fff',
        rotate: 'tangential'
      },
      axisTick: {
        lineStyle: {
          color: '#fff',
          width: 2
        },
        length: 8
      },
      splitLine: {
        lineStyle: {
          color: '#fff',
          width: 2
        },
        length: 12
      },
      pointer: {
        valueIndex: 0,
        itemStyle: {
          color: gradient,
        },
        style: { scale: [1, 1] },
        width: 6
      },
      axisLine: {
        lineStyle: {
          width: 18,
          color: [
            [lightIntensity.value / 100, gradient],
            [1, '#E0E0E0'],
          ],
        },
      },
      detail: {
        show: true,
        formatter: [
          '{title|光照强度}',
          '{value|' + lightIntensity.value + '}{unit|Lux}'
        ].join('\n'),
        rich: {
          title: {
            color: '#fff',
            fontSize: 24,
            fontWeight: 'bold',
            textAlign: 'center',
            padding: [0, 0, 10, 0]
          },
          value: {
            color: '#33ffd0',
            fontSize: 42,
            fontWeight: 'bold',
            textAlign: 'center',
            textShadow: '0 0 30px rgba(51, 255, 208, 1)',
            padding: [0, 0, 5, 0]
          },
          unit: {
            color: '#33ffd0',
            fontSize: 18,
            padding: [0, 0, 0, 5]
          }
        },
        offsetCenter: [0, '45%'],
      },
    },
  ],
}))
</script>

<style scoped>
.panel {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 